import React, { Component } from 'react';
import '../../assets/iconfont/iconfont.css';
import './index.css';
import { NavLink } from 'react-router-dom/cjs/react-router-dom.min';
import IScroll from 'iscroll/build/iscroll-probe';
function TabBar(WrapComponent) {
  return class index extends Component {
    constructor(props) {
      super(props);
      this.state = {
        index: 0,
        menuList: [
          {
            icon: 'icon-daohanglan-03',
            title: '首页',
            path: '/home',
          },
          {
            icon: 'icon-icon04',
            title: '分类',
            path: '/category',
          },
          {
            icon: 'icon-shipin',
            title: '视频',
            path: '/vedio',
          },
          {
            icon: 'icon-My',
            title: '我的',
            path: '/my',
          },
        ],
        myScroll: null,
      };
    }
    onTabChange(index) {
      this.setState({ index });
    }
    componentDidMount() {
      //由于手机性能的原因，我们在定时器里面进行实例化
      this.myScroll = new IScroll('#wrapper', {
        mouseWheel: true, // 支持滚动
        scrollbars: 'custom', // 自定义样式
        shrinkScrollbars: 'scale', // 缩放
      });

      // this.dom.addEventListener(
      //   'touchmove',
      //   function (e) {
      //     e.stopPropagation()
      //   },
      //   false
      // )
    }
    componentDidUpdate() {
      this.myScroll.refresh();
    }

    render() {
      return (
        <div className="container">
          <div
            id="wrapper"
            className="content"
            ref={(ref) => {
              this.dom = ref;
            }}
          >
            <WrapComponent />
          </div>

          <div className="tabbar">
            <div className="tabbarWrap">
              {this.state.menuList.map((menu, index) => (
                <NavLink to={menu.path} className={'tabbarItem ' + this.state.index === index ? 'active' : ''} 
                    key={index} onClick={this.onTabChange.bind(this, index)}>
                  <span className={'iconfont ' + menu.icon}></span>
                  <p>{menu.title}</p>
                </NavLink>
              ))}
            </div>
          </div>
        </div>
      );
    }
  };
}

export default TabBar;
